import React from 'react';
import { memo, useEffect, useState } from 'react'
// 纯组件只受props 和state 的影响, 才会重新渲染执行
const List = ({ keyword }) => {
    //  当props.keyword 改变的时候, 执行useEffect 中的执行逻辑
    const [data1, setData] = useState([]);

    useEffect(() => {
        console.log('执行了');
        const data = []
        data.length = 50000
        for (let i = 0; i < data.length; i++) {
            data.fill(i + 1, i)  //参数1插入的数据,参数2要插入的下标.
        }
        setData(data)
    }, [keyword])
    return (
        <div>
            {
                data1.map((item) => {
                    return (
                        <p key={item}>{keyword}</p>
                    )
                })
            }
        </div>
    );
}

export default memo(List);
